<template>
  <div>
    <el-row v-if="config">
      <el-col :span="6" class="title"><span>项目信息</span></el-col>
      <el-col :span="18">
        <el-switch
          v-model="config.info"
          on-color="onColor"
          off-color="offColor">
        </el-switch>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" class="title"><span>画面信息</span></el-col>
      <el-col :span="18">
        <el-switch
          v-model="config.pic"
          on-color="onColor"
          off-color="offColor">
        </el-switch>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="6" class="title"><span>地图</span></el-col>
      <el-col :span="18">
        <el-switch
          v-model="config.map"
          on-color="onColor"
          off-color="offColor">
        </el-switch>
      </el-col>
    </el-row> -->
    <el-row>
      <el-col :span="6" class="title"><span>采集数据</span></el-col>
      <el-col :span="18">
        <el-switch
          v-model="config.data"
          on-color="onColor"
          off-color="offColor">
        </el-switch>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="6" class="title"><span>故障报警</span></el-col>
      <el-col :span="18">
        <el-switch
          v-model="config.alert"
          on-color="onColor"
          off-color="offColor">
        </el-switch>
      </el-col>
    </el-row> -->
    <el-row>
      <el-col :span="6" class="title"><span>历史趋势</span></el-col>
      <el-col :span="18">
        <el-switch
          v-model="config.trend"
          on-color="onColor"
          off-color="offColor">
        </el-switch>
      </el-col>
    </el-row>
    <el-button type="primary" style="margin-left: 25%" @click="saveModule">保存</el-button>
  </div>
</template>
<script>
const onColor = '#13ce66'
const offColor = '#e8eaef'

export default {
  name: 'modulesetting',
  props: {
    config: {
      default: function () {
        return {
          info: true, // 是否有项目信息
          pic: true, // 是否有画面信息
          map: true, // 是否有地图
          data: true, // 是否有采集数据
          alert: true, // 是否有阈值报警
          trend: true // 是否有历史趋势
        }
      }
    }
  },
  data () {
    return {
      value2: '',
      onColor: onColor,
      offColor: offColor
    }
  },
  mounted () {
    // console.log(this.config)
  },
  methods: {
    saveModule () {
      this.$emit('save-module-setting', this.config)
    }
  }
}
</script>
<style lang="stylus" scoped>
.el-row {
  margin-bottom: 20px;
  .title {
    padding-right: 30px;
    text-align: right;
  }
}
</style>
